<!--登录页-->
<template>
  <div class="login">
    <!--系统标题-->
    <div class="login-title">
      <p class="title-en">i-Lab</p>
      <p class="version">3.0</p>
    </div>

    <!--登录-->
    <div class="login-content">
      <!--登录插画-->
      <img class="login-bg" src="@/assets/img/loginBg.svg" />

      <!--登录框-->
      <div class="login-box">
        <div>
          <img class="login-log" :src="baseConfig.logo" />
          <!-- <span>{{ customConfig.name }}</span> -->
        </div>
        <p class="platform-name">智慧实验室 i-Lab</p>
        <p class="application-name">移动录入系统</p>
        <p class="subtitle-text">Welcome欢迎登录</p>

        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
          <!--账户名-->
          <el-form-item prop="username">
            <span class="login-prefix-icon svg-container">
              <svg-icon icon-class="user" />
            </span>
            <el-input
              v-model="loginForm.username"
              class="input-noborder"
              placeholder="请输入用户名"
              @keyup.enter.native="handleLogin"
            ></el-input>
          </el-form-item>

          <!--密码-->
          <el-form-item prop="password">
            <span class="login-prefix-icon svg-container" style="z-index: 9999">
              <svg-icon icon-class="password" />
            </span>
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              class="input-noborder"
              :type="passwordType"
              placeholder="请输入密码"
              @keyup.enter.native="handleLogin"
            ></el-input>
            <span class="show-pwd" @click="showPwd">
              <svg-icon
                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
              />
            </span>
          </el-form-item>

          <!--记住密码-->
          <el-form-item class="remember-pwd">
            <div>
              <el-checkbox v-model="rememberPwsFlag">记住密码</el-checkbox>
            </div>
            <p class="remember-pwd-text">忘记密码?</p>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              class="submit-login"
              @click="handleLogin"
              @ended="handleLogin"
              >立即登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>

    <ChangePasswordDialog
      v-if="dialogFormVisible"
      ref="ChangePasswordDialog"
      :dialog-form-visible.sync="dialogFormVisible"
      :old-password.sync="loginForm.password"
      @closeChangPassword="closeChangPassword"
    />

    <p class="copyright-text">© 2019-2022 上海诺觉软件技术有限公司 版权所有</p>
    <BaseLoading v-if="submitLoad" :loading-text="'登陆中...'" />
  </div>
</template>

<script>
import { removeToken } from "@/utils/auth";
import BaseLoading from "@/components/BaseLoading/index.vue";
import ChangePasswordDialog from "../login/components/ChangePasswordDialog.vue";

export default {
  name: "Login",
  components: { BaseLoading, ChangePasswordDialog },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 4) {
        callback(new Error("密码必须大于4个字符"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [{ required: true, message: "请输入用户名" }],
        password: [
          { required: true, message: "请输入密码" },
          { validator: validatePassword, trigger: "blur" },
        ],
      },
      rememberPwsFlag: false,
      submitLoad: false,
      readonly: false,
      redirect: "",
      passwordType: "password",
      dialogFormVisible: false,

      baseConfig: {},
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true,
    },
    "$store.getters.firstLoginStatus"(newVal, oldVal) {
      if (newVal === 0 || newVal === null || newVal === undefined) {
        this.dialogFormVisible = true;
      } else if (newVal === 1) {
        this.pageTurn();
      }
    },
  },
  created() {
    const baseConfig = localStorage.getItem("eln_baseConfig");
    baseConfig && (this.baseConfig = JSON.parse(baseConfig));
  },
  methods: {
    closeChangPassword() {
      this.loginForm.password = "";
    },
    pageTurn() {
      this.$router.push({
        path: "/dashboard" || "/",
        query: this.otherQuery,
      });
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      this.readonly = true;
      //    this.Helper.myLoading()
      removeToken();
      this.$store.commit("user/SET_NAME", {});
      this.$store.commit("user/SET_CURRENTUSERID", "");
      this.$store.commit("user/SET_ROLES", []);
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.submitLoad = true;
          this.readonly = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then((res) => {
              // this.$router.push({
              //   path: "/dashboard" || "/",
              //   query: this.otherQuery,
              // });
              this.submitLoad = false;
              this.readonly = false;
            })
            .catch(() => {
              this.submitLoad = false;
              this.readonly = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
  },
};
</script>

<style lang="scss">
@function vw($px) {
  @return ($px / 1366) * 100vw;
}
.login {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #fff;
  .login-title {
    width: 100%;
    padding: vw(12) 0 vw(38) vw(36);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .title-en {
      font-weight: bold;
      font-size: vw(30);
      color: #4787ff;
    }

    .version {
      font-size: vw(22);
      color: #224994;
      padding: 0 10px;
    }
  }
  .login-content {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    justify-content: space-evenly;
    padding: 0 10%;
    .login-bg {
      width: vw(744);
      max-width: 744px;
      height: auto;
      vertical-align: bottom;
      margin-right: 4%;
    }
    .login-box {
      width: vw(456);
      max-width: 456px;
      min-width: 390px;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.18);
      border-radius: 10px;
      border: 2px solid #2b7deb;
      padding: 24px 34px 42px;

      & > div {
        display: flex;
        align-items: center;
        justify-content: center;

        .login-log {
          display: block;
          width: 70%;
        }

        .title-en {
          font-weight: bold;
          font-size: vw(30);
          color: #4787ff;
        }

        & > span {
          font-size: 20px;
          color: #000;
          margin-left: 12px;
        }
      }

      .svg-container {
        padding: 0px 5px 0px 5px;

        vertical-align: middle;
        width: 30px;
        display: inline-block;
        position: absolute;
        z-index: 9999;
        font-size: 21px;
        text-align: center;
        color: #4383ff;
      }

      .show-pwd {
        position: absolute;
        right: 10px;
        top: 7px;
        font-size: 16px;
        color: #4383ff;
        cursor: pointer;
        user-select: none;
      }
      .platform-name {
        font-size: 24px;
        color: #224994;
        margin: vw(16) 0 vw(8);
        text-align: center;
      }

      .application-name {
        font-size: 20px;
        color: #224994;
        margin: 0 0 vw(8);
        text-align: center;
      }

      .subtitle-text {
        text-align: center;
        font-size: 16px;
        color: #666666;
        margin-bottom: vw(58);
        letter-spacing: 0.5px;
      }
      .submit-login {
        width: 100%;
        margin-top: 40px;
        font-size: 20px;
        padding: 12px 20px;
        font-weight: normal;
        background: #2f71f5;
      }
    }
    .el-form {
      .el-input__inner {
        height: 40px;
        border-radius: 0;
        border-width: 0;
        border-bottom-width: 1px;
        padding-left: 34px;
        font-size: 16px;
      }
      .el-input__prefix {
        display: flex;
        align-items: center;
        .login-prefix-icon {
          width: 21px;
        }
      }
    }
    .remember-pwd {
      .el-form-item__content {
        line-height: 22px;
        display: flex;
        align-items: center;
        .el-checkbox {
          display: flex;
          align-items: center;
          .is-checked {
            .el-checkbox__inner {
              background: #2f71f5;
              border-color: #2f71f5;
            }
          }
          .el-checkbox__inner {
            width: 14px;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            &:after {
              min-width: 4px;
              min-height: 7px;
              width: 4px;
              height: 7px;
              left: 4px;
            }
          }
          .el-checkbox__label {
            font-size: 14px;
            font-weight: normal;
            color: #666666;
          }
        }
        .remember-pwd-text {
          margin-left: auto;
          font-size: 14px;
          color: #666666;
          &:hover {
            color: #4787ff;
            border-bottom: 1px #4787ff solid;
            cursor: pointer;
          }
        }
      }
    }
  }
  .copyright-text {
    font-size: vw(12);
    color: #4787ff;
    width: 100%;
    box-sizing: border-box;
    padding: vw(16) 0 vw(16) vw(30);
    position: fixed;
    left: 0;
    bottom: 0;
  }
}
</style>
